<!--
 * @Descripttion: 过滤器V2
 * @version: 2.2
 * @Author: sakuya
 * @Date: 2021年7月30日14:48:41
 * @LastEditors: 孙开源 && sunkaiyuan@namenode.cn
 * @LastEditTime: 2023-09-17 17:10:09
-->

<template>
  <el-row class="financeNumber">
    <div v-for="(num, index) in numberArray" :key="index" :class="financeBord(index)" @click="numberClick(index, $event)">
      <span style="line-height: 26px;">{{ numberArray[index] }}</span>
    </div>
  </el-row>

  <div style="position: absolute;margin-top: -999999px;">
    <el-input v-model="numberArray[activeClassIndex]" ref="financeInput" @keyup="enterNumber" @blur="blurNumber"
      @keydown="enterNumberDown"></el-input>
  </div>
</template>
<script>
export default {
  name: "formatFinanceNumber",
}
</script >
<script setup>

import { ref, watch, computed } from "vue";
import XEUtils from "xe-utils";
const emit = defineEmits(["update:modelValue"]);

const props = defineProps({
  params: {},
  modelValue: null,
  length: { type: Number, default: 15 }
});


const defaultValue = ref(props.modelValue);

watch(defaultValue, (value) => {
  const { row, column } = props.params;
  XEUtils.set(row, column.field, value);
  props.params.$grid.updateFooter();
  emit("update:modelValue", value);
});
watch(
  () => props.modelValue,
  (value) => {
    defaultValue.value = value;
  }
);

const activeClassIndex = ref(-1);
const financeInput = ref({});
const numberlenght = ref(props.length);
const numberClick = (index, e) => {
  if (props.params.column.cellRender.attrs.editable) {
    if (activeClassIndex.value == -1) {
      activeClassIndex.value = numberlenght.value - 3;
      financeInput.value.focus();
    }
    else {
      activeClassIndex.value = index;
      financeInput.value.focus();
    }
    e && e.stopPropagation();
  }
}

const keyIsNum = (e) => (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105);

const blurNumber = () => {
  if (activeClassIndex.value != -1)
    numberClick(-1);
}

const enterNumberDown = (e) => {
  let isNumber = keyIsNum(e);

  if (e.keyCode == 8) {
    isNumber = true;
  }
  else if (e.keyCode == 46) {
    defaultValue.value = 0;
  }

  if (!isNumber) {
    e.stopPropagation();
    e.preventDefault();
  }

}
const enterNumber = (e) => {

  if (e.key == ".") {
    numberClick(numberlenght.value - 2);
  }
  else {
    //小数后两位处理
    if (activeClassIndex.value == numberlenght.value - 2) {
      numberArray.value[numberlenght.value - 2] = e.key;
      numberClick(numberlenght.value - 1);
    }
    else if (activeClassIndex.value == numberlenght.value - 1) {
      numberArray.value[numberlenght.value - 1] = e.key;
      numberClick(-1);
    }

    defaultValue.value = numberArray.value.map((v, k) => {
      if (v == '') {
        if (activeClassIndex.value == numberlenght.value - 2)
          return "0";
        if (activeClassIndex.value == numberlenght.value - 1)
          return "0";
        if (k > activeClassIndex.value)
          return "0";
      }
      return v;
    }).join("") / 100;
  }
}

const numberArray = computed(() => {

  let number = XEUtils.toNumber(defaultValue.value).toFixed(2);
  let intLeft = XEUtils.floor(number).toString();
  let intRight = ((number - XEUtils.toNumber(intLeft)).toFixed(2) * 100).toString() + "00";

  let intAll = intLeft + intRight.substring(0, 2);

  let _array = [];

  for (let i = 0; i < numberlenght.value; i++) {
    _array.push("");
  }

  _array = _array.map((v, k) => {
    if (intAll.length < numberlenght.value - 1 - k)
      return '';
    return intAll.substring(intAll.length - numberlenght.value + k, intAll.length - numberlenght.value + k + 1);
  })
  return _array;
},
);
let financeBord = computed(() => (index) => {
  let active = (activeClassIndex.value == index ? ' active' : '')
  let bordClass = "Financedefault";
  if (numberlenght.value - 1 - index == 1)
    bordClass = "FinanceRed";
  else if ((numberlenght.value - 1 - index - 1) % 3 == 0)
    bordClass = "FinancebBlue";
  else if (index == numberlenght.value - 1) {
    bordClass = "FinancebLast";
  }
  return bordClass + active;
});
</script>
<style>
.financeNumber div {
  width: 8px;
}

.FinancebLast {
  border-right: 1px solid #ccc;
}

.FinancebLast,
.Financedefault {
  border-left: 1px solid #ccc;
}


.FinanceRed {
  border-left: 1px solid red;
}

.FinancebBlue {
  border-left: 1px solid blue;
}

.financeNumber .active {
  background-color: rgb(190, 188, 188);
}
</style>
 